<template>
  <!-- 精选团购 -->
  <div class="groupBuy">
    <p class="title">精选团购</p>
    <p class="more" @click="toGroupList"><span>>></span>查看更多</p>
    <div class="scroll-box">
      <scroll-view class="recommend-scrollx-box"
        scroll-x='true'
        scroll-with-animation="true"
        scroll-left="scrollLeftSys"
      >
        <!-- 每个独立图片及介绍价格 -->
        <div class="recommend-hot-box"
          v-for="(item, index) in groupBuyList" :key="index"
        >
          <!-- 绑定事件用于跳转页面 -->
          <div class="recomment-hot-wrap" @click="clickToPage(item.link)">
            <img :src="item.pic" class="recommend-hot-image" />
            <div class="clearfix">
              <h1 class="goods-title">{{item.title}}</h1>
              <span class="googs-old-money">{{MoneySymbol}}{{item.oldPrice}}</span>
            </div>
            <div class="group-new-money">
              团购价<span class="money">{{MoneySymbol}}{{item.price}}</span>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>

  </div>
</template>

<script>
import TYPES from '@/constant/index' // 常量文件
import { bindViewTap } from '@/utils/index' // 引入公用库

export default {
  props: ['groupBuyList', 'navto'], // 接收外部传入的数据
  data () {
    return {
      MoneySymbol: TYPES.goodsData.MoneySymbol, // 存金额前缀符号
      toview: ''
    }
  },
  methods: {
    // 团购商品跳转事件
    clickToPage (data) {
      // TODO: 跳转到商品页面
      console.log(data)
      let navFlag = this.navto || false // 默认不使用navto方式跳转页面
      bindViewTap(`../productPage/main?id=${data}`, navFlag)
    },
    // 查看更多事件
    toGroupList (data) {
      bindViewTap(`../groupList/main`, false)
    }
  },
  onReady () {
  }
}
</script>

<style scope>
/* 精选团购 */
.groupBuy {
  font-size: 28rpx;
  height: 346rpx;
  background: #fff;
}
.groupBuy .title,.groupBuy .more {
  height: 46rpx;
  line-height: 46rpx;
}
.groupBuy .title {
  float: left;
  font-weight: bold;
  padding-left: 20rpx;
}
.groupBuy .more {
  display: flex;
  float: right;
  padding-right: 20rpx;
  vertical-align: middle;
}
.more span {
  font-size: 20rpx;
  /* vertical-align: middle; */
}
/* 精选团购内横向样式 */
.recommend-scrollx-box {
  display: flex;
  white-space: nowrap;
  /* height: 245rpx; */
  font-size: 24rpx;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.recommend-hot-box {
  width: 230rpx;
  height: 232rpx;
  margin-right: 10px;
  display: inline-block;
}
.recomment-hot-wrap {
  overflow: hidden;
}
.recommend-hot-image {
  width: 100%;
  height: 192rpx;
}
.goods-title{
  float: left;
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
  width: 135rpx;
}
.googs-old-money{
  float: right;
  color: #6C6868;
  text-decoration: line-through;
}
.group-new-money{
  padding-top: 4px;
  text-align: center;
}
.group-new-money .money{
  padding-left: 2px;
  font-weight: bold;
  color: #E51C23;
}
</style>
